﻿/*
 * 头部导航组件 - Header Navigation Component
 * 提供网站顶部导航栏，包含菜单、搜索、主题切换等功能
 */

import ThemeSwitch from '@/components/ThemeSwitch';
import UserStatus from '@/components/UserStatus';
import { useTheme } from '@/contexts/ThemeContext';
import { DownOutlined, SearchOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';
import classNames from 'classnames';
import React, { useState } from 'react';
import styles from './header.less';

interface MenuItem {
  key: string;
  label: string;
  path?: string;
  children?: MenuItem[];
}

const Header: React.FC = () => {
  // 使用主题上下文
  const { theme, toggleTheme } = useTheme();

  // 定义菜单项
  const menuItems: MenuItem[] = [
    { key: 'home', label: '首页', path: '/home' },
    { key: 'archives', label: '归档', path: '/archives' },
    { key: 'talks', label: '说说', path: '/talks' },
    {
      key: 'tools',
      label: '工具',
      path: '/tools',
    },
    {
      key: 'about',
      label: '关于',
      children: [
        { key: 'about-me', label: '关于我', path: '/about/me' },
        { key: 'about-blog', label: '关于博客', path: '/about/blog' },
      ],
    },
    // {
    //   key: 'portals',
    //   label: '传送',
    //   children: [
    //     { key: 'portal-1', label: '链接一', path: 'https://example1.com' },
    //     { key: 'portal-2', label: '链接二', path: 'https://example2.com' },
    //     { key: 'portal-3', label: '链接三', path: 'https://example3.com' },
    //   ],
    // },
  ];

  // 跟踪当前打开的下拉菜单
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);

  // 处理菜单项点击
  const handleMenuClick = (item: MenuItem) => {
    if (item.path) {
      if (item.path.startsWith('http')) {
        window.open(item.path, '_blank');
      } else {
        history.push(item.path);
      }
    }
  };

  // 处理下拉菜单的显示和隐藏
  const handleDropdownToggle = (key: string) => {
    if (openDropdown === key) {
      setOpenDropdown(null);
    } else {
      setOpenDropdown(key);
    }
  };

  // 处理搜索点击
  const handleSearchClick = () => {
    // 实现搜索功能，可以跳转到搜索页面或打开搜索弹窗
    console.log('Search clicked');
  };

  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <div className={styles.logo}>LongBlog</div>
        <nav className={styles.nav}>
          <ul className={styles.menuList}>
            {menuItems.map((item) => (
              <li
                key={item.key}
                className={classNames(styles.menuItem, {
                  [styles.hasDropdown]: item.children,
                  [styles.active]: openDropdown === item.key,
                })}
                onMouseEnter={() =>
                  item.children && handleDropdownToggle(item.key)
                }
                onMouseLeave={() =>
                  item.children && handleDropdownToggle(item.key)
                }
              >
                {item.children ? (
                  <div className={styles.dropdownTrigger}>
                    <span>{item.label}</span>
                    <DownOutlined className={styles.dropdownIcon} />
                    <div
                      className={classNames(styles.dropdown, {
                        [styles.visible]: openDropdown === item.key,
                      })}
                    >
                      <ul className={styles.dropdownMenu}>
                        {item.children.map((child) => (
                          <li
                            key={child.key}
                            className={styles.dropdownItem}
                            onClick={() => handleMenuClick(child)}
                          >
                            {child.label}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                ) : (
                  <div
                    className={styles.menuLink}
                    onClick={() => handleMenuClick(item)}
                  >
                    {item.label}
                  </div>
                )}
              </li>
            ))}
            <li className={styles.menuItem}>
              <div className={styles.searchIcon} onClick={handleSearchClick}>
                <SearchOutlined />
              </div>
            </li>
            <li className={styles.menuItem}>
              <div className={styles.themeToggleWrapper}>
                <ThemeSwitch
                  checked={theme === 'light'}
                  onChange={toggleTheme}
                  title={
                    theme === 'light' ? '切换到夜间模式' : '切换到日间模式'
                  }
                />
              </div>
            </li>
            <li className={styles.menuItem}>
              <UserStatus showAvatar showUsername={false} showTip />
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
};

export default Header;
